import React from 'react'
import { useSubscription } from '../contexts/AuthProvider'
import { Button } from '../components/ui/Button'
import { Badge } from '../components/ui/Badge'
import { Crown, BookOpen, Calendar } from 'lucide-react'

export function Analytics() {
  const { canUseFeature } = useSubscription()

  if (!canUseFeature('analytics')) {
    return (
      <div className="text-center py-12">
        <div className="mb-6">
          <div className="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <Crown className="h-8 w-8 text-orange-600" />
          </div>
          <h2 className="text-2xl font-bold text-gray-900 mb-2">Premium Feature</h2>
          <p className="text-gray-600 mb-6 max-w-md mx-auto">
            Analytics and reading insights are available with Premium and Academic plans.
          </p>
          <Button onClick={() => window.location.href = '/app/subscription?feature=analytics'}>
            <Crown className="h-4 w-4 mr-2" />
            Upgrade to Premium
          </Button>
        </div>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Analytics</h1>
          <p className="text-gray-600">
            Insights into your reading patterns and research interests
          </p>
        </div>
        <Badge variant="default" className="flex items-center">
          <Crown className="h-3 w-3 mr-1" />
          Premium Feature
        </Badge>
      </div>

      {/* Analytics content would go here */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div className="bg-white rounded-lg border border-gray-200 p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">Papers Read</p>
              <p className="text-2xl font-bold text-gray-900">24</p>
            </div>
            <BookOpen className="h-8 w-8 text-blue-600" />
          </div>
        </div>
        
        <div className="bg-white rounded-lg border border-gray-200 p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">This Week</p>
              <p className="text-2xl font-bold text-gray-900">7</p>
            </div>
            <Calendar className="h-8 w-8 text-green-600" />
          </div>
        </div>
      </div>
    </div>
  )
}